<template>
  <div class="page_vue">
    <div class="page_header">
      <div class="page_header_left">
        <img src="../../../assets/images/home/tools.png" style="width:18px" alt="" />
        <span class="page_header_left_title">{{ $t('home.commonTools') }}</span>
      </div>
      <img src="../../../assets/images/home/right.png" style="width:5px" alt="" />
    </div>
    <div class="page_content">
      <div class="tool_box" v-for="(item, index) in toolsList" :key="index" @click="skipClick(item.path)">
        <div class="icon_box">
          <!-- <img :src="item.imgUrl" class="icon_img" alt="" /> -->
           <svg-icon  :icon-class="item.imgUrl" class="icon_img" />
        </div>
        <div class="tool_name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

const toolsList = ref([
  { name:"知识公告", imgUrl: "inform", path: "/notice/notice/noticeList" },
  { name: "AI问答", imgUrl: "ai", path: "/aiQA/chatGptIndex" },
  { name: "企业知识库", imgUrl: "ecmdocument", path: "/newUi/enterprises/enterpriseList" },
  { name: "个人知识库", imgUrl: "knowledge", path: "/newUi/networkDisk/doc" },
]);

const skipClick = (path) => {
  router.push(path)
}
</script>
<style scoped lang='scss'>
.page_header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .page_header_left {
    font-size: 0;
    display: flex;
    align-items: center;

    .page_header_left_title {
      font-size: 16px;
      color: #292929;
      margin-left: 5px;
      font-weight: 600;
    }
  }
}

.page_content {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;

  .tool_box {
    cursor: pointer;
    width: 130px;
    display: flex;
    align-items: center;
    margin-top: 25px;

    .icon_box {
      width: 25px;
      height: 25px;
      background: #fff;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon_img {
      width: 14px;
    }

    .tool_name {
      font-size: 13px;
      color: #292929;
      margin-left: 8px;
    }

    &:hover {
      .tool_name {
        color: #3b8df5;
      }
    }
  }
}
</style>